import { useNavigate, useLocation } from 'react-router-dom'
import './rysj.scss'
import { LeftOutline } from 'antd-mobile-icons'

/**
 * 入院审核页面组件
 * 功能：显示入院审核通过状态和患者信息
 */
function Rysj() {
  const navigate = useNavigate()
  const location = useLocation()
  
  // 从路由状态中获取用户提交的数据
  const { formData, reviewTime } = location.state || {}
  
  // 调试信息
  console.log('接收到的表单数据:', formData)
  console.log('审核时间:', reviewTime)
  
  // 生成住院号（基于当前时间）
  const generateHospitalizationId = () => {
    const now = new Date()
    const year = now.getFullYear()
    const month = String(now.getMonth() + 1).padStart(2, '0')
    const day = String(now.getDate()).padStart(2, '0')
    const random = Math.floor(Math.random() * 1000).toString().padStart(3, '0')
    return `${year}${month}${day}${random}`
  }

  // 患者信息数据 - 保留原有信息，添加用户提交的数据
  const patientInfo = {
    name: formData?.patientName || '王小柯',
    gender: formData?.gender || '女',
    age: formData?.age ? `${formData.age}岁` : '25岁',
    hospitalizationId: formData?.medicalCardNumber || generateHospitalizationId(),
    admissionWard: '内一科病区',
    attendingDoctor: '刘医生',
    bedNumber: '暂未签床',
    reviewTime: reviewTime || '2020-01-01 15:20:20',
    admissionDiagnosis: '肺部阴影',
    // 添加用户提交的其他信息
    idNumber: formData?.idNumber || '',
    phoneNumber: formData?.phoneNumber || '',
    currentAddress: formData?.currentAddress || '',
    currentAddressDetail: formData?.currentAddressDetail || '',
    contactName: formData?.contactName || '',
    contactPhone: formData?.contactPhone || '',
    contactRelationship: formData?.contactRelationship || '',
    birthDate: formData?.birthDate || '',
    nationality: formData?.nationality || '',
    ethnicity: formData?.ethnicity || ''
  }

  return (
    <div className='rysj'>
      {/* 页面顶部导航栏 */}
      <div className='rysj-top'>
        <span><LeftOutline className='rysj-top-left' onClick={() => navigate(-1)} /></span>
        <span className='rysj-top-title'>入院审核</span>
      </div>

      {/* 步骤指示器 */}
      <div className='step-indicator'>
        <div className='progress-container'>
          <div className='step-item completed'>
            <div className='step-circle'>
              <span className='step-number'>1</span>
            </div>
            <span className='step-label'>基本信息</span>
          </div>
          <div className='step-line'></div>
          <div className='step-item active'>
            <div className='step-circle'>
              <span className='step-number'>2</span>
            </div>
            <span className='step-label'>入院审核</span>
          </div>
        </div>
      </div>

      {/* 审核通过状态横幅 */}
      <div className='status-banner'>
        <div className='status-icon'>
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M9 16.17L4.83 12L3.41 13.41L9 19L21 7L19.59 5.59L9 16.17Z" fill="#52C41A"/>
          </svg>
        </div>
        <div className='status-content'>
          <div className='status-title'>入院审核通过</div>
          <div className='status-message'>
            您的入院审核通过, 当前暂无床位, 请先完成预交充值, 有床位时医院人员将电话通知您。
          </div>
        </div>
      </div>

      {/* 住院人信息区域 */}
      <div className='patient-info-section'>
        <div className='section-header'>
          <span className='section-title'>住院人信息</span>
          <span className='status-tag'>已登记</span>
        </div>
        
        <div className='patient-details'>
          {/* 用户提交的信息显示在上面 */}
          {formData && (
            <>
              {patientInfo.idNumber && (
                <div className='detail-row'>
                  <span className='detail-label'>身份证号：</span>
                  <span className='detail-value'>{patientInfo.idNumber}</span>
                </div>
              )}
              
              {patientInfo.phoneNumber && (
                <div className='detail-row'>
                  <span className='detail-label'>联系电话：</span>
                  <span className='detail-value'>{patientInfo.phoneNumber}</span>
                </div>
              )}
              
              {patientInfo.currentAddress && (
                <div className='detail-row'>
                  <span className='detail-label'>现住址：</span>
                  <span className='detail-value'>{patientInfo.currentAddress} {patientInfo.currentAddressDetail}</span>
                </div>
              )}
              
              {patientInfo.contactName && (
                <div className='detail-row'>
                  <span className='detail-label'>联系人：</span>
                  <span className='detail-value'>{patientInfo.contactName}</span>
                  {patientInfo.contactPhone && (
                    <span className='detail-value'>{patientInfo.contactPhone}</span>
                  )}
                </div>
              )}
              
              {patientInfo.birthDate && (
                <div className='detail-row'>
                  <span className='detail-label'>出生日期：</span>
                  <span className='detail-value'>{patientInfo.birthDate}</span>
                </div>
              )}
            </>
          )}

          {/* 原有的信息显示在下面 */}
          <div className='detail-row'>
            <span className='detail-value'>{patientInfo.name}</span>
            <span className='detail-value'>{patientInfo.gender}</span>
            <span className='detail-value'>{patientInfo.age}</span>
          </div>
          
          <div className='detail-row'>
            <span className='detail-label'>住院号：</span>
            <span className='detail-value'>{patientInfo.hospitalizationId}</span>
          </div>
          
          <div className='detail-row'>
            <span className='detail-label'>入院病区：</span>
            <span className='detail-value'>{patientInfo.admissionWard}</span>
          </div>
          
          <div className='detail-row'>
            <span className='detail-label'>住院医生：</span>
            <span className='detail-value'>{patientInfo.attendingDoctor}</span>
          </div>
          
          <div className='detail-row'>
            <span className='detail-label'>床位号：</span>
            <span className='detail-value'>{patientInfo.bedNumber}</span>
          </div>
          
          <div className='detail-row'>
            <span className='detail-label'>审核时间：</span>
            <span className='detail-value'>{patientInfo.reviewTime}</span>
          </div>
          
          <div className='detail-row'>
            <span className='detail-label'>入院诊断：</span>
            <span className='detail-value'>{patientInfo.admissionDiagnosis}</span>
          </div>
        </div>
      </div>

      {/* 底部按钮 */}
      <div className='bottom-button'>
        <button className='prepayment-button' onClick={() => navigate('/zyyj', { 
          state: { 
            patientInfo: patientInfo,
            formData: formData 
          } 
        })}>
          去预交金
        </button>
      </div>
    </div>
  )
}

export default Rysj
